<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width:400px;
            height:500px;
            background:skyblue;
            margin:100px auto;
            padding:100px 0 0 100px;
        }
        .box input{
            margin:20px 0 0 20px;
        }
        .box label{
            display:inline-block;
            width:100px;
            text-align:center;
        }
        button{
            margin:30px 30px 0 50px;
        }
    </style>
</head>
<body> 
    <!-- 表单的验证（以下是需求）
        -  【1】验证账号
            - 用户名不能为空
            - 不能使用特殊字符（只能使用数字、字母、下划线、横杠）
            - 必须以字母开头
            - 长度6-20
        -  【2】昵称只能输入3-6个中文  /[\u4e00-\u9fa5]{3,6}/ 
        -  【3】电子邮件
            + 163邮箱：
            + 英文开头,@前面的内容可以包含数字字母下划线、-(可以多位)
            + @后面的域名只能是163
            + 域名后缀（.com .cn .net）可以有多个。

        【4】身份证 18位数 后面以为可能是 X x

        - 【5】手机号码
        - 11位 开头必须是 1,第二位必须是 345678 还剩下 8-9位只要是数字就可以了

        - 【6】生日验证
            + 1999/05/08
            + 1999-05-08
            + 19990508

        - 【7】密码  
            + 长度小于20 
            + 不能包含空格 密码不一致能不能提交 -->
    <div class="box">
        <label for="">账号 </label>
        <input type="text" id="username"><br>
        <label for="">昵称</label>
        <input type="text" id="user"><br>
        <label for="">电子邮件</label>
        <input type="text" id='email'><br>
        <label for="">身份证</label>
        <input type="text" id='sfz'><br>
        <label for="">手机号码</label>
        <input type="text" id='phone'><br>
        <label for="">生日</label>
        <input type="text" id='birthday'><br>
        <label for="">密码</label>
        <input type="text" id='pass'><br>
        <label for="">确认密码</label>
        <input type="text"><br>
        <button id="btn1">确认</button>
        <button id="btn2">清除</button>
    </div>
    <script>
        //  3、百度注册页面的验证
       //  用户名只能最多7个汉字 或者 14个英文字母  只能有14个字符，一个中文表示两个字符
      // 获取元素
        var input=document.querySelectorAll('input'); 
        var username=document.querySelector('#username');
        var user=document.querySelector('#user');
        var sfz=document.querySelector('#sfz');
        var phone=document.querySelector('#phone');
        var birthday=document.querySelector('#birthday');
        var pass=document.querySelector('#pass');
        // 账号
        var reg1=/^[a-z][0-9a-z_-]{6,20}$/i;
        // 昵称
        var reg2=/[\u4e00-\u9fa5]{3,6}/;
        // 电子邮件
        var reg3=/^[a-z][a-z0-9_-]{5,12}@163\.(sina|cn|com|net)$/i;
        // 身份证
        var reg4=/^\d{17}(\d|X|x)$/;
        // 手机号
        var reg5=/^1[356789]\d{9}$/;
        // 生日
        var reg6=/^\d{4}(-|\/)?(0[1-9]|1[0-2])\1(0[1-9]|[1-2]\d|3[0-1])$/;
        // 密码
        var reg7=/^[a-z0-9]{1,20}$/i;
        // 给按钮添加点击事件

        btn1.onclick=function(){   
            // 检测是否能获取到元素
            // console.log(username.value)
            if(username!="" && reg1.test(username.value)==true){
                if(reg2.test(user.value)==true){
                    if(reg3.test(email.value)==true){
                        if(reg4.test(sfz.value)==true){
                            if(reg5.test(phone.value)==true){
                               if(reg6.test(birthday.value)==true){
                                if(reg7.test(pass.value)==true){
                                    alert('注册成功')
                                }
                               }
                            }else{
                                alert('手机号不正确')
                            }
                        }else{
                            alert('身份证号不正确')
                        }
                    }else{
                        alert('电子邮件书写错误')
                    }
                }else{
                    alert('昵称不正确')
                }
            }else{
                alert('账号不正确')
            }
        } 
    </script>
</body>
</html>